<template>
  <div class="home">
    <h1>todolist</h1>
    <div class="home-content">
      <div class="home-top">
        <div class="home-top-l">
          <span :class="['iconfont icon-arrow-down',{'allcheck':allCheck}]" @click="headleAllCheck"></span>
        </div>
        <div class="home-top-r">
          <input type="text" @keyup.enter="keyClick" v-model="valueInput" placeholder="请输入内容">
        </div>
      </div>
      <div class="list">
        <div class="list-mid">
          <div class="list-mid-item"
          v-for="(item,index) in filterTodulist"
          :key="item.id"
          >
            <div class="list-mid-item-l">
              <input type="checkbox" v-model="item.status">
            </div>
            <div :class="['list-mid-item-c',{complate:item.status}]" @dblclick="headleEditTodu(index)">
              <span :class="['title',{hidden:edit_index===index}]">{{item.text}}</span>
              <input type="text" :class="['title',{hidden:edit_index!=index}]" v-model="item.text" 
              @blur="saveEditTodu"
              >
            </div>
            <div class="list-mid-item-r" @click="delClick(index)">
              X
            </div>
          </div>
        </div>
      </div>
      <div class="home-bottom">
        <div class="home-bottom-l">剩余{{remaning}}项</div>
        <div class="home-bottom-c">
          <div @click="headleClick('all')" :class="['home-bottom-c-left',{active:activeTab ==='all'}]">全部</div>
          <div @click="headleClick('active')" :class="['home-bottom-c-mid',{active:activeTab ==='active'}]">激活</div>
          <div @click="headleClick('complate')" :class="['home-bottom-c-right',{active:activeTab ==='complate'}]">完成</div>
        </div>
        <div class="home-bottom-r" @click="headleClear">清除已完成的</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      activeTab: "all",
      edit_index: -1,
      todoList: [
        { text: "赶紧敲代码",status:false,id:1},
        { text: "早上得吃早餐",status:false,id:2},
        { text: "晚上得说晚安",status:false,id:3},
        { text: "按时吃饭按时睡觉",status:false,id:4}
      ],
      valueInput: ''
    }
  },
  computed: {
     filterTodulist () {
       if(this.activeTab==='all'){
         return this.todoList
       }else if(this.activeTab==='active'){
         return this.todoList.filter(v=>{
           return !v.status
         })
       }else if(this.activeTab==='complate'){
          return this.todoList.filter(v=>{
            return v.status
          })
       }
     },
      remaning () {
        let remaningTodo=this.todoList.filter(v=>{
          if(!v.status){
            return true
          }
        })
        return remaningTodo.length
        
      },
      allCheck(){
        let checked=true; 
        this.todoList.map(v=>{
          if(!v.status) checked=false;
        })
         return checked
      }
  },
  methods: {
    headleClear () {
      let todos=this.todoList.filter(v=>{
        return !v.status
      })
      this.todoList=todos;
    },
    headleClick (activeTab) {
      this.activeTab=activeTab
    },
    saveEditTodu () {
      this.edit_index=-1;
    },
    headleEditTodu (index) {
      this.edit_index=index;
    },
    keyClick(){
      if(!this.valueInput){
        this.$message({
          message: '警告哦，这是一条警告消息',
          type: 'warning'
        });
        return false
      }
      this.todoList.push(
        {text: this.valueInput,status:false,id:Date.now()}
      )
      if(this.todoList.length>5){
        this.todoList.shift(
           {text: this.valueInput,status:false,id:Date.now()}
        )
      }
      this.valueInput=''
    },
    headleAllCheck(){
      let newtodoList=JSON.parse(JSON.stringify(this.todoList))
      newtodoList.map(item=>{
        item.status=true;
      })
      this.todoList=newtodoList
    },
    delClick(index){
      this.todoList.splice(index,1)
    }, 
  },
}
</script>

<style lang="less" scoped>
  .home {
    width: 50%;
    margin: 0 auto;
    margin-top: 20px;
  h1 {
    text-align: center;
    height: 50px;
    line-height: 50px;
    color: orangered;
  }

  .home-content {
    // min-height: 500px;
    border: 2px solid green;
    .home-top {
      margin-top: 10px;
      display: flex;
      align-items: center;
      height: 40px;
      .home-top-l {
        flex: 1;
        text-align: center;
        .iconfont.icon-arrow-down {
          font-size: 24px;
        }
        .allcheck{
          color: red;
        }
      }

      .home-top-r {
        display: flex;
        height: 40px;
        justify-content: center;
        flex: 8;
        padding-right: 5px;
        input {
          display: block;
          width: 100%;
          padding-left: 5px;
        }
      }
    }
    .list {
      .list-mid {
        .list-mid-item {
          height: 50px;
          align-items: center;
          display: flex;
          .list-mid-item-l{
            flex: 1;
            display: flex;
            justify-content: center;
          }
          .list-mid-item-c{
            flex: 8;
            .hidden{
              display: none;
            }
          }
          .complate{
            color: #dddddd;
            text-decoration:line-through ;
          }
          .list-mid-item-r{
            text-align: center;
            flex: 1;
            visibility: hidden;
          }
        }
        .list-mid-item:hover{
          .list-mid-item-r{
              visibility: visible;
              text-align: center;
              flex: 1;
              cursor: pointer;
          }
        }
      }
    }
    .home-bottom {
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: chartreuse;
      cursor: pointer;
      .home-bottom-l {
        padding-left: 10px;
      }

      .home-bottom-c {
        display: flex;
        .active{
          border: 2px solid red;;
        }
        .home-bottom-c-left {
          margin-right: 10px;
        }

          .home-bottom-c-mid {
            margin-right: 10px;
        }

          .home-bottom-c-right {
            margin-right: 10px;
        }
      }

        .home-bottom-r {
          padding-right: 10px;
      }
    }
  }
}
</style>